<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="utf-8" />
	<meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1, maximum-scale=1, user-scalable=0" />
	<title>Retina - Free CSS template by ChocoTemplates.com</title>
	<link rel="shortcut icon" type="image/x-icon" href="<?php bloginfo('template_directory'); ?>/images/favicon.ico" />
    <link rel="stylesheet" type="text/css" media="all" href="<?php bloginfo( 'stylesheet_url' ); ?>" />
	<link href='http://fonts.googleapis.com/css?family=Raleway:400,900,800,700,600,500,300,200,100' rel='stylesheet' type='text/css'>
	<script src="<?php bloginfo('template_url'); ?>/js/jquery-1.8.0.min.js" type="text/javascript"></script>
	<!--[if lt IE 9]><script src="<?php bloginfo('template_url'); ?>/js/modernizr.custom.js"></script><![endif]-->
	<script src="<?php bloginfo('template_url'); ?>/js/jquery.carouFredSel-5.5.0-packed.js" type="text/javascript"></script>
	<script src="<?php bloginfo('template_url'); ?>/js/functions.js" type="text/javascript"></script>
</head>
<body>
<!-- wrapper -->
<div id="wrapper">
	<!-- shell -->
	<div class="shell">
		<!-- container -->
		<div class="container">
			<!-- header -->
			<header id="header">
				<h1 id="logo"><a href="#">Retina</a></h1>
				<!-- search -->
				<div class="search">
					<form action="" method="post">
						<input type="text" class="field" value="keywords here ..." title="keywords here ..." />
						<input type="submit" class="search-btn" value="" />
						<div class="cl">&nbsp;</div>
					</form>
				</div>
				<!-- end of search -->
				<div class="cl">&nbsp;</div>
			</header>
			<!-- end of header -->
			<!-- navigaation -->
			<nav id="navigation">
				<?php wp_nav_menu( array( 
					'theme_location' => 'primary',
					'container_id' => 'cssmenu', 
  					'walker' => new CSS_Menu_Maker_Walker()
				)); ?>
				<div class="cl">&nbsp;</div> 
			</nav>
			<!-- end of navigation -->
			<!-- slider-holder -->
			<?php //if (is_home()): ?>
			<div class="slider-holder">
				
				<!-- slider -->
				<div class="slider">
					<div class="socials">
						<a href="#" class="facebook-ico">facebook-ico</a>
						<a href="#" class="twitter-ico">twitter-ico</a>
						<a href="#" class="skype-ico">skype-ico</a>
						<a href="#" class="rss-ico">rss-ico</a>
						<div class="cl">&nbsp;</div>
					</div>

					<div class="arrs">
						<a href="#" class="prev-arr"></a>
						<a href="#" class="next-arr"></a>
					</div>

					<ul>
						<li id="img1">
							<div class="slide-cnt">
								<h4>Heading Title Goes</h4>
								<h2>Just Like That</h2>
								<p>Acor porta mi, non venenatis augue imperdiet quis. Nam faucibus, felis ut suscipit vulputate, tortor quam ultricies neque, eget dignissim elit urna a metus. Aliquam sed quam dui, id lacinia nunc. <a href="#">read more</a></p>
							</div>
							<img src="<?php bloginfo('template_directory'); ?>/images/mac-img.png" alt="" />
						</li>

						<li id="img2">
							<div class="slide-cnt">
								<h4>Heading Title Goes</h4>
								<h2>Just Like That</h2>
								<p>Acor porta mi, non venenatis augue imperdiet quis. Nam faucibus, felis ut suscipit vulputate, tortor quam ultricies neque, eget dignissim elit urna a metus. Aliquam sed quam dui, id lacinia nunc. <a href="#">read more</a></p>
							</div>
							<img src="<?php bloginfo('template_directory'); ?>/images/mac-img.png" alt="" />
						</li>

						<li id="img3">
							<div class="slide-cnt">
								<h4>Heading Title Goes</h4>
								<h2>Just Like That</h2>
								<p>Acor porta mi, non venenatis augue imperdiet quis. Nam faucibus, felis ut suscipit vulputate, tortor quam ultricies neque, eget dignissim elit urna a metus. Aliquam sed quam dui, id lacinia nunc. <a href="#">read more</a></p>
							</div>
							<img src="<?php bloginfo('template_directory'); ?>/images/mac-img.png" alt="" />
						</li>

						<li id="img4">
							<div class="slide-cnt">
								<h4>Heading Title Goes</h4>
								<h2>Just Like That</h2>
								<p>Acor porta mi, non venenatis augue imperdiet quis. Nam faucibus, felis ut suscipit vulputate, tortor quam ultricies neque, eget dignissim elit urna a metus. Aliquam sed quam dui, id lacinia nunc. <a href="#">read more</a></p>
							</div>
							<img src="<?php bloginfo('template_directory'); ?>/images/mac-img.png" alt="" />
						</li>

						<li id="img5">
							<div class="slide-cnt">
								<h4>Heading Title Goes</h4>
								<h2>Just Like That</h2>
								<p>Acor porta mi, non venenatis augue imperdiet quis. Nam faucibus, felis ut suscipit vulputate, tortor quam ultricies neque, eget dignissim elit urna a metus. Aliquam sed quam dui, id lacinia nunc. <a href="#">read more</a></p>
							</div>
							<img src="<?php bloginfo('template_directory'); ?>/images/mac-img.png" alt="" />
						</li>

						<li id="img6">
							<div class="slide-cnt">
								<h4>Heading Title Goes</h4>
								<h2>Just Like That</h2>
								<p>Acor porta mi, non venenatis augue imperdiet quis. Nam faucibus, felis ut suscipit vulputate, tortor quam ultricies neque, eget dignissim elit urna a metus. Aliquam sed quam dui, id lacinia nunc. <a href="#">read more</a></p>
							</div>
							<img src="<?php bloginfo('template_directory'); ?>/images/mac-img.png" alt="" />
						</li>

						<li id="img7">
							<div class="slide-cnt">
								<h4>Heading Title Goes</h4>
								<h2>Just Like That</h2>
								<p>Acor porta mi, non venenatis augue imperdiet quis. Nam faucibus, felis ut suscipit vulputate, tortor quam ultricies neque, eget dignissim elit urna a metus. Aliquam sed quam dui, id lacinia nunc. <a href="#">read more</a></p>
							</div>
							<img src="<?php bloginfo('template_directory'); ?>/images/mac-img.png" alt="" />
						</li>

						<li id="img8">
							<div class="slide-cnt">
								<h4>Heading Title Goes</h4>
								<h2>Just Like That</h2>
								<p>Acor porta mi, non venenatis augue imperdiet quis. Nam faucibus, felis ut suscipit vulputate, tortor quam ultricies neque, eget dignissim elit urna a metus. Aliquam sed quam dui, id lacinia nunc. <a href="#">read more</a></p>
							</div>
							<img src="<?php bloginfo('template_directory'); ?>/images/mac-img.png" alt="" />
						</li>
					</ul>
				</div>
				<!-- end of slider -->

				<!-- thumbs -->
				<div id="thumbs-wrapper">
					<div id="thumbs">
						<a href="#img1" class="selected"><img src="<?php bloginfo('template_directory'); ?>/images/thumb.png"/></a>
						<a href="#img2"><img src="<?php bloginfo('template_directory'); ?>/images/thumb2.png" /></a>
						<a href="#img3"><img src="<?php bloginfo('template_directory'); ?>/images/thumb3.png" /></a>
						<a href="#img4"><img src="<?php bloginfo('template_directory'); ?>/images/thumb4.png" /></a>
						<a href="#img5"><img src="<?php bloginfo('template_directory'); ?>/images/thumb.png" /></a>
						<a href="#img6"><img src="<?php bloginfo('template_directory'); ?>/images/thumb2.png" /></a>
						<a href="#img7"><img src="<?php bloginfo('template_directory'); ?>/images/thumb3.png" /></a>
						<a href="#img8"><img src="<?php bloginfo('template_directory'); ?>/images/thumb4.png" /></a>
					</div>
					<a id="prev" href="#"></a>
					<a id="next" href="#"></a>
				</div>
				<!-- end of thumbs -->
			</div>
			<?php //endif;?>

			<!-- main -->
			<div class="main">